import React from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import './nav.css'
import { TabBar } from 'antd-mobile';
const icons = {
    wode: 'iconfont icon-wode',
    wodeSelected: 'iconfont icon-wode',
    store: 'iconfont icon-dianpu-copy',
    storeSelected: 'iconfont icon-dianpu-copy',
    order: 'iconfont icon-ziyuan',
    orderSelected: 'iconfont icon-ziyuan',
    goods: 'iconfont icon-ziyuan',
    goodsSelected: 'iconfont icon-ziyuan'
}

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: false,
        };
    }
    componentDidMount() {
        this.setState({
            selectedTab: 'blueTab'
        })
    }
    render() {
        return (
            <div style={{ position: 'fixed', height: '10vh', width: '100%', bottom: 0 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >

                    <TabBar.Item
                        title="订单"
                        key="Life"
                        icon={<span className={icons.order} style={{
                            width: '22px',
                            height: '22px',

                        }}
                        />
                        }

                        selectedIcon={<span className={icons.order} style={{
                            width: '22px',
                            height: '22px',
                            color: 'yellow'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'blueTab'}

                        onPress={() => {

                            this.props.history.push('/Home/Order')
                            this.setState({
                                selectedTab: 'blueTab',
                            });

                        }}
                        data-seed="logId"
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="商品"
                        key="Koubei"

                        selected={this.state.selectedTab === 'yellowTab'}
                        onPress={() => {
                            this.props.history.push('/Home/GoodsZ')
                            this.setState({
                                selectedTab: 'yellowTab',
                            });
                        }}
                        data-seed="logId1"
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={<span className={icons.store} style={{
                            width: '22px',
                            height: '22px',
                            color: 'gray'
                        }}
                        />
                        }
                        selectedIcon={<span className={icons.store} style={{
                            width: '22px',
                            height: '22px',
                            color: 'yellow'
                        }}
                        />
                        }
                        title="店铺"
                        key="store"

                        selected={this.state.selectedTab === 'redTab'}
                        onPress={() => {
                            this.props.history.push('/Home/MyStore')
                            this.setState({
                                selectedTab: 'redTab',
                            });
                        }}
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="我的"
                        key="Friend"

                        selected={this.state.selectedTab === 'greenTab'}
                        onPress={() => {
                            this.props.history.push('/Home/MyInfo')
                            this.setState({
                                selectedTab: 'greenTab',
                            });
                        }}
                    >

                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}


export default withRouter(TabBarExample)